<ng-container *ngIf="strokeWidth" >
    <svg:line
        class="grid"
        [attr.x1]="viewPortX"
        [attr.y1]="0"
        [attr.x2]="viewPortX + viewPortWidth"
        [attr.y2]="0"
        [attr.stroke-width]="4*strokeWidth"
    />
    <svg:line
        class="grid"
        [attr.x1]="0"
        [attr.y1]="viewPortY"
        [attr.x2]="0"
        [attr.y2]="viewPortY + viewPortHeight"
        [attr.stroke-width]="4*strokeWidth"
    />
    <svg:line *ngFor="let x of xGrid; trackBy:trackByIndex"
        class="grid"
        [ngClass]="{'tick': showTicks && x % tickInterval === 0 }"
        [attr.x1]="x"
        [attr.y1]="viewPortY"
        [attr.x2]="x"
        [attr.y2]="viewPortY + viewPortHeight"
        [attr.stroke-width]="strokeWidth"
    />

    <ng-container *ngIf="!preview && showTicks">
        <ng-container *ngFor="let y of yGrid; trackBy:trackByIndex">
            <svg:text class="tick" *ngIf="y % tickInterval ===  0" [attr.x]="-4*strokeWidth" [attr.y]="y - 4*strokeWidth" [ngStyle]="{'font-size': strokeWidth*14+'px'}" >{{ y }}</text>
        </ng-container>

        <ng-container *ngFor="let x of xGrid; trackBy:trackByIndex">
            <svg:text class="tick" *ngIf="x != 0 && x % tickInterval === 0" [attr.x]="x - 4*strokeWidth" [attr.y]="-4*strokeWidth" [ngStyle]="{'font-size': strokeWidth*14+'px'}">{{ x }}</text>
        </ng-container>
    </ng-container>

    <svg:line *ngFor="let y of yGrid; trackBy:trackByIndex"
        class="grid"
        [ngClass]="{'tick': showTicks && y % tickInterval === 0 }"
        [attr.x1]="viewPortX"
        [attr.y1]="y"
        [attr.x2]="viewPortX + viewPortWidth"
        [attr.y2]="y"
        [attr.stroke-width]="strokeWidth"
    />
    <svg:path
        [attr.d]="parsedPath.asString()"
        [attr.stroke-width]="strokeWidth"
    />


    <ng-container *ngFor="let loc of controlPoints; trackBy:trackByIndex">
        <svg:line *ngFor="let rel of loc.relations; trackBy:trackByIndex" 
            class="control"
            [attr.x1]="loc.x"
            [attr.y1]="loc.y"
            [attr.x2]="rel.x"
            [attr.y2]="rel.y"
            [attr.stroke-width]="strokeWidth"
        />
    </ng-container>

    <svg:path *ngIf="hoveredItem && !draggedPoint && !preview"
        [attr.d]="hoveredItem.asStandaloneString()"
        [attr.stroke-width]="strokeWidth"
        class="hovered" />

    <svg:path *ngIf="focusedItem  && !preview"
        [attr.d]="focusedItem.asStandaloneString()"
        [attr.stroke-width]="strokeWidth"
        class="dragged"
    />

    <ng-container *ngFor="let loc of targetPoints; trackBy:trackByIndex">
        <svg:circle *ngIf="loc.movable"
            class="target"
            [attr.cx]="loc.x"
            [attr.cy]="loc.y"
            [attr.r]="3*strokeWidth"
            (mousedown)="startDrag(loc);$event.stopPropagation()"
            (touchstart)="startDrag(loc);$event.preventDefault();$event.stopPropagation()"
            [attr.stroke-width]="12*strokeWidth"
            (mouseenter)="hoveredItem=loc.itemReference; $event.stopPropagation()"
            (mouseleave)="hoveredItem=null" 
            [ngClass]="{
                hovered:loc.itemReference===hoveredItem && !draggedPoint,
                dragged:loc.itemReference===focusedItem
            }"
        />
    </ng-container>

    <ng-container *ngFor="let loc of controlPoints; trackBy:trackByIndex">
        <svg:circle *ngIf="loc.movable"
            class="control"
            [attr.cx]="loc.x"
            [attr.cy]="loc.y"
            [attr.r]="3*strokeWidth"
            (mousedown)="startDrag(loc);$event.stopPropagation()"
            (touchstart)="startDrag(loc);$event.preventDefault();$event.stopPropagation()"
            [attr.stroke-width]="12*strokeWidth"
            (mouseenter)="hoveredItem=loc.itemReference;  $event.stopPropagation()"
            (mouseleave)="hoveredItem=null" 
            [ngClass]="{
                hovered:loc.itemReference===hoveredItem && !draggedPoint,
                dragged:loc.itemReference===focusedItem
            }"
        />
    </ng-container>
</ng-container>
